<template>
  <div id="course">
    <c-title :hide="false" text="我的课程"></c-title>
    <main class="main">
        <div class="course-content">
          <div
            class="box01"
            v-for="item in myCourseInfo"
        :key='item.goods_id'
            @click="goToDetail(item.goods_id)"
          >

            <div style="display: flex;">
              <div class="image">
                <img :src="item.goods_thumb" style="width: 100%; height: 100%;" />
              </div>
              <div class="title">
                <span class="name" style="font-size: 15px;"
                  >课程名称:{{ item.goods_title }}</span
                >
                <div>
                  <div class="flex" style="justify-content: space-between; align-items: flex-end;">
                  <div class="flex" style="display: flex; flex-direction: column; justify-content: flex-end;">
                    <span
                      slot="text"
                      style="line-height: 1.5rem; text-align: left; color: #8c8c8c; font-size: 0.6875rem;"
                      >订单号：{{ item.order_sn }}</span
                    >
                    <span  style="color: #8c8c8c; font-size: 0.6875rem;">{{ item.created_at }}</span>
                  </div>
                  <div>
                    <span class="leave" >进入学习</span>
                  </div>
                  </div>
                </div>
              </div>
              <!-- <i
                slot="icon"
                class="iconfont icon-bofang"
                style="float: right; line-height: 3rem; color: #ff9600; font-size: 1.25rem;"
              ></i> -->
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
     </main>
  </div>
</template>

<script>
import course_mycourse_controller from "./course_mycourse_controller";
export default course_mycourse_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
.main {
  padding: 0.625rem;

  .leave {
    display: inline-block;
    background-color: #fa3939;
    color: #fff;
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    padding: 0.25rem 0.6875rem;
  }

  .flex {
    display: flex;
  }
}

.box01 {
  border-bottom: solid 0.0625rem #ebebeb;
  text-align: left;
  width: 100%;
  background-color: #fff;
  padding: 0.75rem;
  margin-bottom: 0.625rem;
  border-radius: 0.3125rem;
}

.image {
  width: 4.0625rem;
  height: 4.0625rem;
  background-color: #333;
  float: left;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
  }
}

.title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  float: left;
  margin-left: 0.625rem;

  .name {
    width: 16.125rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

i {
  position: absolute;
  right: 1.25rem;
}

.clearfix {
  clear: both;
}
</style>
